<template>
  <div class="select">
    <head-top head-title="如何选择" go-back="true"></head-top>
    <div class="banner"></div>
    <div class="des1">
      <div class="bottom-line">
        <h4 class="title">先了解该项目的三大模块</h4>
        <p class="theme">根据你发布的产品的性质和服务功能，可以再以下的三个模块进行选择。</p>
        <ul>
          <li>生活服务是为了下去提供放心快捷的服务板块。</li>
          <li>邻家特产是为小区用户分享自己用或者吃的健康食材。</li>
          <li>邻里学堂是为可给小区的小孩或者需要培训和交友的人提供的一个平台。</li>
        </ul>
      </div>
    </div>
    <div class="des2">
      <div class="bottom-line">
        <h4 class="title">在了解三大模块的分类</h4>
        <ul>
          <li>邻家特产：蔬菜水果，肉禽蛋类，水产海鲜，零嘴烘焙，米面油粮，干酱腊卤，养生滋补。</li>
          <li>生活服务：家庭清洗，家政服务，健康养生，宠物绿植，家电护理，美容美业，数码维护，更多。</li>
          <li>邻里学堂：兴趣爱好，少儿培训，亲子活动，交友聚会。</li>
        </ul>
      </div>
    </div>
    <div class="split"></div>
    <div class="communication">
      <div class="wrapper-top">
        <span class="title">交流区（4）</span>
        <div class="comment">
          <span class="comment-icon"></span>
          <span class="content">写评论</span>
        </div>
      </div>
      <div class="comment-wrapper">
        <ul>
          <li class="main">
            <div class="avatar"><img src="./images/touxiang1@2x.png" alt=""></div>
            <div class="content">
              <p class="name">
                <span class="des">一闪而过的风景</span><img src="./images/xingbie-nan@2x.png" alt=""></p>
              <p class="adress">
                <span class="des">阳光国际</span>
                <span class="time">9月11号</span>
              </p>
              <p class="comment">河北邯郸我的家</p>
              <div class="icon"></div>
            </div>
          </li>
          <li class="main">
            <div class="avatar"><img src="./images/touxiang1@2x.png" alt=""></div>
            <div class="content">
              <p class="name">
                <span class="des">一闪而过的风景</span><img src="./images/xingbie-nan@2x.png" alt=""></p>
              <p class="adress">
                <span class="des">阳光国际</span>
                <span class="time">9月11号</span>
              </p>
              <p class="comment">河北邯郸我的家</p>
              <div class="icon"></div>
            </div>
          </li>
          <li class="main">
            <div class="avatar"><img src="./images/touxiang1@2x.png" alt=""></div>
            <div class="content">
              <p class="name">
                <span class="des">一闪而过的风景</span><img src="./images/xingbie-nan@2x.png" alt=""></p>
              <p class="adress">
                <span class="des">阳光国际</span>
                <span class="time">9月11号</span>
              </p>
              <p class="comment">河北邯郸我的家</p>
              <div class="icon"></div>
            </div>
          </li>
          <li class="main">
            <div class="avatar"><img src="./images/touxiang1@2x.png" alt=""></div>
            <div class="content">
              <p class="name">
                <span class="des">一闪而过的风景</span><img src="./images/xingbie-nan@2x.png" alt=""></p>
              <p class="adress">
                <span class="des">阳光国际</span>
                <span class="time">9月11号</span>
              </p>
              <p class="comment">河北邯郸我的家</p>
              <div class="icon"></div>
            </div>
          </li>

        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import headTop from '../header/Header.vue'
export default {
  name: 'HowSelected',
  components: {
    headTop
  }
}
</script>

<style lang="scss">
@import "../../common/sass/base.scss";
@import "../../common/sass/mixin.scss";
.select {
  padding-top: 40px;
  width: 100%;
  background-color: #fff;
  .banner {
    display: inline-block;
    width: 100%;
    height: 185px;
    background-size: 100% 185px;
    background-repeat: no-repeat;
    @include bgimg('./images/banner');
  }
  .des1,
  .des2 {
    padding: 24px 10px 0px 10px;
    line-height: 25px;
    .bottom-line {
      @include border-bottom-1px(rgb(217, 217, 217));
      padding-bottom: 10px;
      .title {
        font-size: 14px;
        line-height: 0;
        padding-bottom: 13px;
      }
      .theme {
        font-size: 12px;
      }
      ul {
        font-size: 12px;
        li {
          position: relative;
          margin-left: 7px;
          &::before {
            content: '';
            position: absolute;
            top: 9px;
            left: -7px;
            width: 4px;
            height: 4px;
            background-color: #0B7AD9;
            border-radius: 100%;
          }
        }
      }
    }
  }
  .des2 {
    .bottom-line {
      @include border-none();
    }
  }
  .split {
    height: 10px;
    background-color: #f2f2f2;
  }
  .communication {
    padding: 0 10px;
    .wrapper-top {
      height: 32px;
      line-height: 32px;
      font-size: 12px;
      @include border-bottom-1px(rgb(217, 217, 217));
      .title {
        display: inline-block;
      }
      .comment {
        float: right;
        font-size: 10px;
        color: #E9A65C;
        .comment-icon {
          display: inline-block;
          width: 12px;
          height: 12px;
          background-size: 12px 12px;
          background-repeat: no-repeat;
          @include bgimg('./images/xiepinglun');
          font-size: 0;
          vertical-align: middle;
        }
        .content {
          margin-left: 6px;
          vertical-align: middle;
        }
      }
    }
    .comment-wrapper {
      width: 100%;
      .main {
        position: relative;
        padding: 14px 0;
        @include border-bottom-1px(rgb(217, 217, 217));
        &:last-child {
          @include border-none();
        }
        .avatar {
          display: inline-block;
          img {
            position: absolute;
            top: 12px;
            left: 0px;
            width: 40px;
            height: 40px;
          }
        }
        .content {
          display: inline-block;
          margin-left: 55px;
          .name {
            padding-top: 3px;
            padding-bottom: 10px;
            img {
              width: 8px;
              height: 11px;
              font-size: 0;
              vertical-align: middle;
            }
            .des {
              vertical-align: middle;
              margin-right: 4px;
            }
          }
          .adress {
            padding-bottom: 16px;
            font-size: 10px;
            color: #979797;
            .time {
              margin-left: 4px;
            }
          }
          .comment {
            font-size: 14px;
          }
          .icon {
            position: absolute;
            top: 18px;
            right: 0;
            width: 11px;
            height: 10px;
            background-size: 11px 10px;
            background-repeat: no-repeat;
            @include bgimg('./images/pinglun');
          }
        }
      }
    }
  }
}
</style>
